{% extends "file_manager/base.html" %}

{% block content %}
<div class="container mt-4">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">文档预览: {{ file_name }}</h5>
            <a href="{% url 'download' file_path=file_path %}" class="btn btn-sm btn-primary">下载</a>
            {% if file_path|slice:'-4:' == '.pdf' %}
            <div id="pdf-preview" style="width: 100%; height: 70vh;"></div>
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const url = "{% url 'download' file_path=file_path %}";
                    document.getElementById('pdf-preview').innerHTML = `<iframe src='${url}' style='width:100%;height:100%;border:none;'></iframe>`;
                });
            </script>
            {% elif file_path|slice:'-5:' == '.docx' or file_path|slice:'-4:' == '.doc' %}
            <div id="doc-preview" style="width: 100%; height: 70vh;"></div>
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const url = "{% url 'download' file_path=file_path %}";
                    fetch(url)
                        .then(response => response.blob())
                        .then(blob => {
                            const fileReader = new FileReader();
                            fileReader.onload = function(e) {
                                const arrayBuffer = e.target.result;
                                OfficePreview.renderDoc(arrayBuffer, 'doc-preview');
                            };
                            fileReader.readAsArrayBuffer(blob);
                        });
                });
            </script>
            {% elif file_path|slice:'-5:' == '.xlsx' or file_path|slice:'-4:' == '.xls' %}
            <div id="xls-preview" style="width: 100%; height: 70vh;"></div>
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const url = "{% url 'download' file_path=file_path %}";
                    fetch(url)
                        .then(response => response.blob())
                        .then(blob => {
                            const fileReader = new FileReader();
                            fileReader.onload = function(e) {
                                const arrayBuffer = e.target.result;
                                OfficePreview.renderXls(arrayBuffer, 'xls-preview');
                            };
                            fileReader.readAsArrayBuffer(blob);
                        });
                });
            </script>
            {% elif file_path|slice:'-5:' == '.pptx' or file_path|slice:'-4:' == '.ppt' %}
            <div id="ppt-preview" style="width: 100%; height: 70vh;"></div>
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const url = "{% url 'download' file_path=file_path %}";
                    fetch(url)
                        .then(response => response.blob())
                        .then(blob => {
                            const fileReader = new FileReader();
                            fileReader.onload = function(e) {
                                const arrayBuffer = e.target.result;
                                OfficePreview.renderPpt(arrayBuffer, 'ppt-preview');
                            };
                            fileReader.readAsArrayBuffer(blob);
                        });
                });
            </script>
            {% else %}
            <p class="text-muted">不支持该文件类型的预览</p>
            {% endif %}
            您的浏览器不支持文档预览
        </div>
    </div>
</div>
{% endblock %}
